<form #propForm="ngForm" *ngIf="props.data" (click)="drowdown = 0" (ngSubmit)="onSubmitProps(propForm.invalid)">
  <div *ngIf="props.type === 'node'">
    <div class="group" >
      <div class="title">位置和大小</div>
      <div class="flex grid">
        <div>X（px）</div>
        <div>Y（px）</div>
      </div>
      <div class="flex grid mt5">
        <div class="mr5">
          <input
            type="number"
            name="x"
            class="input"
            [(ngModel)]="props.data.rect.x"
            [uiMin]="0"
            [uiMax]="5000"
            [readonly]="readonly"
            required
          />
        </div>
        <div>
          <input
            type="number"
            name="y"
            class="input"
            [(ngModel)]="props.data.rect.y"
            [uiMin]="0"
            [uiMax]="5000"
            [readonly]="readonly"
            required
          />
        </div>
      </div>
      <div class="flex grid mt5">
        <div>宽（px）</div>
        <div>高（px）</div>
      </div>
      <div class="flex grid">
        <div class="mr5">
          <input
            type="number"
            name="width"
            class="input"
            [(ngModel)]="props.data.rect.width"
            [uiMin]="0"
            [uiMax]="5000"
            [readonly]="readonly"
            required
          />
        </div>
        <div>
          <input
            type="number"
            name="height"
            class="input"
            [(ngModel)]="props.data.rect.height"
            [uiMin]="0"
            [uiMax]="5000"
            [readonly]="readonly"
            required
          />
        </div>
      </div>
      <div *ngIf="props.data.is3D">
        <div class="flex grid mt5">
          <div>Z（px）</div>
          <div></div>
        </div>
        <div class="flex grid">
          <div class="mr5">
            <input
              type="number"
              name="z"
              class="input"
              [(ngModel)]="props.data.z"
              [uiMin]="0"
              [uiMax]="5000"
              [readonly]="readonly"
            />
          </div>
          <div>
           
          </div>
        </div>
      </div>
      <div class="flex grid mt5">
        <div title="百分比%对应的小数值">圆角（0 - 1）</div>
        <div>旋转（°）</div>
      </div>
      <div class="flex grid">
        <div class="mr5">
          <input type="number" name="borderRadius" class="input" [(ngModel)]="props.data.borderRadius" [uiMin]="0" [uiMax]="1" [readonly]="readonly"/>
        </div>
        <div>
          <input type="number" name="rotate" class="input" [(ngModel)]="props.data.rotate" [uiMin]="0" [uiMax]="360" [readonly]="readonly"/>
        </div>
      </div>     
    </div>
    <div class="group" >
      <div class="flex middle">
        <div class="title mr5">图片</div>
        <div class="gray tooltip-bottom-left multi" data-tooltip="图片、字体图标同时存在时，图片优先">
          <i class="iconfont icon-help-circle" style="color:#c4c9cd"></i>
        </div>
      </div>    
      <div class="flex input-line">
        <label>图片URL</label>
        <div>
          <input name="image" class="input" [(ngModel)]="props.data.image" [readonly]="readonly" />
        </div>        
      </div>
      <div class="flex grid mt5">
        <div>宽（px）</div>
        <div>高（px）</div>
      </div>
      <div class="flex grid">
        <div class="mr5">
          <input
            type="number"
            name="imageWidth"
            class="input"
            [(ngModel)]="props.data.imageWidth"
            [uiMin]="0"
            [uiMax]="5000"
            (change)="onChangeImgWidth(propForm.invalid)"
            [readonly]="readonly"
          />
        </div>
        <div>
          <input
            type="number"
            name="imageHeight"
            class="input"
            [(ngModel)]="props.data.imageHeight"
            [uiMin]="0"
            [uiMax]="5000"
            (change)="onChangeImgHeight(propForm.invalid)"
            [readonly]="readonly"
          />
        </div>
      </div>     
      <div class="mt5">
        <label class="checkbox">
          <input name="imageRatio" type="checkbox" [(ngModel)]="props.data.imageRatio" (change)="onChangeImgRatio(propForm.invalid)" />
          <span>保存图片比例</span>
        </label>
      </div>

      <div class="flex middle mt5">
        <div class="mr5">为什么不支持图片上传</div>   
        <div class="gray tooltip-bottom-right multi" 
          data-tooltip="目前仅支持整个图文上传到云服务器；个人服务器资源有限（1核cpu，1G内存，20G磁盘），欢迎资助">
          <i class="iconfont icon-help-circle" style="color:#c4c9cd"></i>
        </div>  
      </div>
    </div>
    <div class="group">      
      <div class="title mb5">字体图标</div>    
      <div class="flex input-line middle mb10">
        <label>字体图标</label>
        <div class="pointer icon" (click)="showIcons=true">
          <i *ngIf="icon" class="topology {{icon.class}}"></i>
          <div *ngIf="!icon" class="blank" title="空白"></div>      
        </div>        
      </div>  
      <div [class.hidden]="!showIcons" class="tools">
        <div class="title flex middle">
          <label class="full">选择字体图标：</label>
          <i class="iconfont icon-close hover" (click)="showIcons=false"></i>
        </div>
        <div class="body">
          <div class="icon"  [class.active]="!icon"  (click)="onClickIcon()">
            <div class="blank" title="空白"></div> 
          </div>
          <div class="icon" *ngFor="let item of icons"  [class.active]="item.checked"  (click)="onClickIcon(item)">
            <i class="topology {{item.class}}"></i>
          </div>
        </div>
      </div>     
      <div class="flex input-line">
        <label>字体大小</label>
        <div>
          <input type="number" name="iconSize" class="input" [(ngModel)]="props.data.iconSize" [uiMin]="0" [uiMax]="500" [readonly]="readonly"
            placeholder="<=0表示自适应" />
        </div>
      </div>
      <div class="flex input-line">
        <label>字体颜色</label>
        <div>
          <div class="input color" [class.readonly]="readonly">
            <i [(colorPicker)]="props.data.iconColor" [style.background]="props.data.iconColor" 
              cpAlphaChannel="always" cpOutputFormat="hex" [cpPresetColors]="cpPresetColors" (colorPickerChange)="onSubmitProps(false)"></i>
            <input name="iconColor" [(ngModel)]="props.data.iconColor" [readonly]="readonly"/>            
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="group" *ngIf="props.type === 'line'">
    <div class="title">位置</div>
    <div>
      起点
    </div>
    <div class="flex grid mt5">
      <div class="mr5">
        <input
          type="number"
          name="x"
          class="input"
          [(ngModel)]="props.data.from.x"
          placeholder="X（px）"
          [uiMin]="0"
          [uiMax]="5000"
          [readonly]="readonly"
          required
        />
      </div>
      <div>
        <input
          type="number"
          name="y"
          class="input"
          [(ngModel)]="props.data.from.y"
          placeholder="Y（px）"
          [uiMin]="0"
          [uiMax]="5000"
          [readonly]="readonly"
          required
        />
      </div>
    </div>
    <div class="mt5">
      终点
    </div>
    <div class="flex grid">
      <div class="mr5">
        <input
          type="number"
          name="ex"
          class="input"
          [(ngModel)]="props.data.to.x"
          placeholder="X（px）"
          [uiMin]="0"
          [uiMax]="5000"
          [readonly]="readonly"
          required
        />
      </div>
      <div>
        <input
          type="number"
          name="ey"
          class="input"
          [(ngModel)]="props.data.to.y"
          placeholder="Y（px）"
          [uiMin]="0"
          [uiMax]="5000"
          [readonly]="readonly"
          required
        />
      </div>
    </div>
    <div class="flex grid mt5">
      <div class="mr5">起点箭头</div>
      <div>终点箭头</div>
    </div>
    <div class="flex grid">
      <div class="mr5">
        <div class="rel">
          <div class="input" [class.readonly]="readonly" (click)="$event.stopPropagation(); drowdown = 2">
            <div class="icon-item" [class.hidden]="props.data.fromArrow !== ''">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.fromArrow !== 'triangleSolid'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="0 9,15 4,15 14" fill="#000000" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.fromArrow !== 'triangle'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="0 9,15 4,15 14" fill="#ffffff" stroke="#000000" stroke-width="1" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.fromArrow !== 'diamondSolid'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="0 9,10 6,20 9,10 12" fill="#000000" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.fromArrow !== 'diamond'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="0 9,10 6,20 9,10 12" fill="#ffffff" stroke="#000000" stroke-width="1" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.fromArrow !== 'circleSolid'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M1 9 l85 0" />
                  <circle cx="6" cy="9" r="5" fill="#000000" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.fromArrow !== 'circle'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M1 9 l85 0" />
                  <circle cx="6" cy="9" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.fromArrow !== 'lineUp'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <path d="M0 9 l12 -6" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.fromArrow !== 'lineDown'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <path d="M0 9 l12 6" />
                </g>
              </svg>
            </div>
          </div>
          <div class="dropdown" *ngIf="!readonly" [class.block]="drowdown === 2">
            <div class="icon-item ph10 pv5" (click)="onClickFromArrow('')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l100 0" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickFromArrow('triangleSolid')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="0 9,15 4,15 14" fill="#000000" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickFromArrow('triangle')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="0 9,15 4,15 14" fill="#ffffff" stroke="#000000" stroke-width="1" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickFromArrow('diamondSolid')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="0 9,10 6,20 9,10 12" fill="#000000" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickFromArrow('diamond')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="0 9,10 6,20 9,10 12" fill="#ffffff" stroke="#000000" stroke-width="1" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickFromArrow('circleSolid')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M1 9 l85 0" />
                  <circle cx="6" cy="9" r="5" fill="#000000" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickFromArrow('circle')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M1 9 l85 0" />
                  <circle cx="6" cy="9" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickFromArrow('lineUp')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <path d="M0 9 l12 -6" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickFromArrow('lineDown')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <path d="M0 9 l12 6" />
                </g>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="rel">
          <div class="input" [class.readonly]="readonly" (click)="$event.stopPropagation(); drowdown = 3">
            <div class="icon-item" [class.hidden]="props.data.toArrow !== ''">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l80 0" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.toArrow !== 'triangleSolid'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l79 0" />
                  <polygon points="79 9,65 4,65 14" fill="#000000" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.toArrow !== 'triangle'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l79 0" />
                  <polygon points="79 9,65 4,65 14" fill="#ffffff" stroke="#000000" stroke-width="1" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.toArrow !== 'diamondSolid'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l79 0" />
                  <polygon points="79 9,70 6,60 9,70 12" fill="#000000" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.toArrow !== 'diamond'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="79 9,70 6,60 9,70 12" fill="#ffffff" stroke="#000000" stroke-width="1" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.toArrow !== 'circleSolid'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M1 9 l78 0" />
                  <circle cx="74" cy="9" r="5" fill="#000000" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.toArrow !== 'circle'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M1 9 l78 0" />
                  <circle cx="74" cy="9" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.toArrow !== 'lineUp'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l78 0" />
                  <path d="M78 9 l-12 -6" />
                </g>
              </svg>
            </div>
            <div class="icon-item" [class.hidden]="props.data.toArrow !== 'lineDown'">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l78 0" />
                  <path d="M78 9 l-12 6" />
                </g>
              </svg>
            </div>
          </div>
          <div class="dropdown" *ngIf="!readonly" [class.block]="drowdown === 3">
            <div class="icon-item ph10 pv5" (click)="onClickToArrow('')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l100 0" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickToArrow('triangleSolid')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="79 9,65 4,65 14" fill="#000000" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickToArrow('triangle')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="79 9,65 4,65 14" fill="#ffffff" stroke="#000000" stroke-width="1" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickToArrow('diamondSolid')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="79 9,70 6,60 9,70 12" fill="#000000" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickToArrow('diamond')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l85 0" />
                  <polygon points="79 9,70 6,60 9,70 12" fill="#ffffff" stroke="#000000" stroke-width="1" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickToArrow('circleSolid')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M1 9 l78 0" />
                  <circle cx="74" cy="9" r="5" fill="#000000" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickToArrow('circle')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M1 9 l78 0" />
                  <circle cx="74" cy="9" r="5" fill="#ffffff" stroke="#000000" stroke-width="1" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickToArrow('lineUp')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l78 0" />
                  <path d="M78 9 l-12 -6" />
                </g>
              </svg>
            </div>
            <div class="icon-item ph10 pv5" (click)="onClickToArrow('lineDown')">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                <g fill="none" stroke="black" stroke-width="1">
                  <path d="M0 9 l78 0" />
                  <path d="M78 9 l-12 6" />
                </g>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="group">
    <div class="title">外观</div>
    <div class="flex grid">
      <div *ngIf="props.type === 'line'">线条类型</div>
      <div>线条样式</div>
    </div>
    <div class="flex grid mt5">
      <div class="mr5 rel" *ngIf="props.type === 'line'">
        <div class="input" [class.readonly]="readonly" (click)="$event.stopPropagation(); drowdown = 4">
          <div class="icon-item" [class.hidden]="props.data.name !== 'curve'">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path d="M0 9 a100,50 0 0,1 85,0" />
              </g>
            </svg>
          </div>
          <div class="icon-item" [class.hidden]="props.data.name !== 'polyline'">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path d="M0 4 l40 0 l0 12 l40 0" />
              </g>
            </svg>
          </div>     
          <div class="icon-item" [class.hidden]="props.data.name !== 'line'">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path d="M0 9 l85 0" />
              </g>
            </svg>
          </div>             
        </div>
        <div class="dropdown" *ngIf="!readonly" [class.block]="drowdown === 4">
          <div class="icon-item ph10 pv5" (click)="onClickName('curve')">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path d="M0 9 a100,50 0 0,1 85,0" />
              </g>
            </svg>
          </div>
          <div class="icon-item ph10 pv5" (click)="onClickName('polyline')">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path d="M0 4 l40 0 l0 12 l40 0" />
              </g>
            </svg>
          </div>
          <div class="icon-item ph10 pv5" (click)="onClickName('line')">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path d="M0 9 l100 0" />
              </g>
            </svg>
          </div>          
        </div>
      </div>
      <div class="mr5 rel">
        <div class="input" [class.readonly]="readonly" (click)="$event.stopPropagation(); drowdown = 1">
          <div class="icon-item" [class.hidden]="props.data.dash">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path d="M0 9 l85 0" />
              </g>
            </svg>
          </div>
          <div class="icon-item" [class.hidden]="props.data.dash !== 1">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path stroke-dasharray="5,5" d="M0 9 l85 0" />
              </g>
            </svg>
          </div>
          <div class="icon-item" [class.hidden]="props.data.dash !== 2">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path stroke-dasharray="10,10" d="M0 9 l85 0" />
              </g>
            </svg>
          </div>
          <div class="icon-item" [class.hidden]="props.data.dash !== 3">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path stroke-dasharray="10,10,2,10" d="M0 9 l85 0" />
              </g>
            </svg>
          </div>
        </div>
        <div class="dropdown" *ngIf="!readonly" [class.block]="drowdown === 1">
          <div class="icon-item ph10 pv5" (click)="onClickDash(0)">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path d="M0 9 l85 0" />
              </g>
            </svg>
          </div>
          <div class="icon-item ph10 pv5" (click)="onClickDash(1)">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path stroke-dasharray="5,5" d="M0 9 l85 0" />
              </g>
            </svg>
          </div>
          <div class="icon-item ph10 pv5" (click)="onClickDash(2)">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path stroke-dasharray="10,10" d="M0 9 l85 0" />
              </g>
            </svg>
          </div>
          <div class="icon-item ph10 pv5" (click)="onClickDash(3)">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
              <g fill="none" stroke="black" stroke-width="1">
                <path stroke-dasharray="10,10,2,10" d="M0 9 l85 0" />
              </g>
            </svg>
          </div>
        </div>
      </div>
      <div *ngIf="props.type !== 'line'"></div>
    </div>
    <div class="flex grid mt5">
      <div>线条颜色</div>
      <div>线宽（px）</div>
    </div>
    <div class="flex grid">
      <div class="mr5">
        <div class="input color" [class.readonly]="readonly">
          <i [(colorPicker)]="props.data.strokeStyle" [style.background]="props.data.strokeStyle" 
              cpAlphaChannel="always" cpOutputFormat="hex" [cpPresetColors]="cpPresetColors" (colorPickerChange)="onSubmitProps(false)"></i>
          <input name="strokeStyle" [(ngModel)]="props.data.strokeStyle" [readonly]="readonly"/>
        </div>
      </div>
      <div>
        <input
          type="number"
          name="lineWidth"
          class="input"
          [(ngModel)]="props.data.lineWidth"
          [uiMin]="1"
          [uiMax]="100"
          [readonly]="readonly"
          required
        />
      </div>
    </div>
    <div class="flex grid mt5">
      <div>背景颜色</div>
      <div>透明度（0 - 1）</div>
    </div>
    <div class="flex grid">
      <div class="mr5">
        <div class="input color" [class.readonly]="readonly">
          <i [(colorPicker)]="props.data.fillStyle" [style.background]="props.data.fillStyle" 
              cpAlphaChannel="always" cpOutputFormat="hex" [cpPresetColors]="cpPresetColors" (colorPickerChange)="onSubmitProps(false)"></i>
          <input name="fillStyle" [(ngModel)]="props.data.fillStyle" [readonly]="readonly"/>
        </div>
      </div>
      <div>
        <input
          type="number"
          name="globalAlpha"
          class="input"
          [(ngModel)]="props.data.globalAlpha"
          [uiMin]="0"
          [uiMax]="1"
          [readonly]="readonly"
        />
      </div>
    </div>    
  </div>
  <div class="group" *ngIf="props.type === 'line'">
    <div class="title">
      <label class="checkbox">
        <input name="remember" type="checkbox" [(ngModel)]="props.data.animatePlay" (change)="onSubmitProps()" [readonly]="readonly"/>
        <span>动画</span>
      </label>
    </div>
    <div class="flex grid">
      <div>颜色</div>
      <div *ngIf="!readonly">快慢</div>
    </div>
    <div class="flex grid mt5">
      <div class="mr5">
        <div class="input color" [class.readonly]="readonly">
          <i [(colorPicker)]="props.data.animateColor" [style.background]="props.data.animateColor" 
              cpAlphaChannel="always" cpOutputFormat="hex" [cpPresetColors]="cpPresetColors" (colorPickerChange)="onSubmitProps(false)"></i>
          <input name="animateColor" [(ngModel)]="props.data.animateColor" [readonly]="readonly"/>
        </div>
      </div>
      <div *ngIf="!readonly">
        <ui-slider class="block" [(min)]="props.data.animateSpeed" [options]="{min: 1, max: 5}" (change)="onSubmitProps()"></ui-slider>
      </div>
    </div>
  </div>
  <div class="group" *ngIf="props.type === 'node'">
    <div class="title">文字</div>   
    <div class="mt5">
      字体
    </div>
    <div >
      <input name="fontFamily" class="input full" [(ngModel)]="props.data.font.fontFamily" [readonly]="readonly"/>
    </div>
    <div class="flex grid mt5">
      <div>颜色</div>
      <div>大小</div>
    </div>
    <div class="flex grid">
      <div class="mr5">
        <div class="input color" [class.readonly]="readonly">
          <i [(colorPicker)]="props.data.font.color" [style.background]="props.data.font.color" 
          cpAlphaChannel="always" cpOutputFormat="hex" [cpPresetColors]="cpPresetColors" (colorPickerChange)="onSubmitProps(false)"></i>
          <input name="fontColor" [(ngModel)]="props.data.font.color" [readonly]="readonly"/>
        </div>
      </div>
      <div>
        <input type="number" name="fontSize" class="input" [(ngModel)]="props.data.font.fontSize" uiMin="0" uiMax="500" [readonly]="readonly"/>
      </div>
    </div>
    <div class="flex grid mt5">
      <div>倾斜</div>
      <div>加粗</div>
    </div>
    <div class="flex grid">
      <div class="mr5">
        <ui-select name="fontStyle" [(ngModel)]="props.data.font.fontStyle" [options]="fontStyleOptions" [multi]="false"
          (change)="onSubmitProps(propForm.invalid)" placeholder="正常" [readonly]="readonly"></ui-select>
      </div>
      <div>
        <ui-select name="fontWeight" [(ngModel)]="props.data.font.fontWeight" [options]="fontWeightOptions" [multi]="false"
        (change)="onSubmitProps(propForm.invalid)" placeholder="正常" [readonly]="readonly"></ui-select>
      </div>
    </div>

    <div class="flex grid mt5">
      <div>水平对齐</div>
      <div>垂直对齐</div>
    </div>
    <div class="flex grid">
      <div class="mr5">
        <ui-select name="textAlign" [(ngModel)]="props.data.font.textAlign" [options]="textAlignOptions" [multi]="false"
          (change)="onSubmitProps(propForm.invalid)" [readonly]="readonly"></ui-select>
      </div>
      <div>
        <ui-select name="textBaseline" [(ngModel)]="props.data.font.textBaseline" [options]="textBaselineOptions" [multi]="false"
        (change)="onSubmitProps(propForm.invalid)" [readonly]="readonly"></ui-select>
      </div>
    </div>

    <div class="flex grid mt5">
      <div>行高</div>
      <div>最大行数</div>
    </div>
    <div class="flex grid">
      <div class="mr5">
        <input type="number" name="lineHeight" class="input" [(ngModel)]="props.data.font.lineHeight" uiMin="1" uiMax="5" [readonly]="readonly"/>
      </div>
      <div>      
          <input type="number" name="textMaxLine" class="input" [(ngModel)]="props.data.textMaxLine" uiMin="0" uiMax="500" [readonly]="readonly"
            placeholder="0：自动匹配高度" />
      </div>
    </div>
    <div class="mt5">
      内容
    </div>
    <div >
      <textarea name="text" class="input full" [(ngModel)]="props.data.text" rows="2" (keydown)="onKeyText($event, propForm.invalid)" [readonly]="readonly"
       placeholder="Ctrl + Enter换行"></textarea>
    </div>
  </div>
  <div class="group" *ngIf="props.type !== 'multi'">
    <div class="title">自定义数据</div> 
    <div>
      <textarea name="data" class="input full" [(ngModel)]="props.data.data" rows="3" (keydown)="onKeyText($event, propForm.invalid)" [readonly]="readonly"
       placeholder="Ctrl + Enter换行"></textarea>
    </div>
  </div>
  <button hidden></button>
</form>
